<template>
  <div
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      width: 180px;
      height: 60px;
      position: relative;
      cursor: pointer;
      z-index: 1;
    "
    class="mouseHover"
  >
    <div
      style="
        position: absolute;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
      "
    >
      <slot></slot>
    </div>
    <svg
      width="211"
      height="84"
      style="
        transform: translate(-50%, -50%) scale(0.8, 0.7);
        position: absolute;
        top: 50%;
        left: 50%;
      "
    >
      <polygon
        fill="rgba(44,247,254,0.1)"
        points="20 10, 25 4, 55 4 60 10"
        stroke="#5E68E0"
      ></polygon>
      <polygon
        fill="rgba(44,247,254,0.1)"
        points="20 74, 25 80, 55 80 60 74"
        stroke="#5E68E0"
      ></polygon>
      <polygon
        fill="rgba(44,247,254,0.1)"
        points="191 10, 186 4, 156 4 151 10"
        stroke="#5E68E0"
      ></polygon>
      <polygon
        fill="rgba(44,247,254,0.1)"
        points="191 74, 186 80, 156 80 151 74"
        stroke="#5E68E0"
      ></polygon>
      <polygon
        fill="rgba(26,152,252,0.2)"
        points="
          20 10, 5 42 20 74
          191 74 206 42 191 10
        "
        stroke="#5E68E0"
      ></polygon>
      <polyline
        fill="transparent"
        stroke="rgba(94,104,224,0.7)"
        points="25 18, 15 42 25 66"
      ></polyline>
      <polyline
        fill="transparent"
        stroke="rgba(94,104,224,0.7)"
        points="186 18, 196 42 186 66"
      ></polyline>
    </svg>
  </div>
</template>
  <style scoped>
.mouseHover:hover {
  background: radial-gradient(rgb(145, 10, 172), rgba(255, 255, 255, 0) 70%);
}
</style>
  